<template>
  <div>
    <div id="myChart" ref="pieDemo" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  beforeDestroy() {},
  mounted() {
   let myChart = echarts.init(document.getElementById("myChart"));
      let option = {
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: {
          data: [
            { value: 1335, name: "直接访问", one: 1 },
            { value: 310, name: "邮件营销", one: 2 },
            { value: 234, name: "联盟广告", one: 3 },
            { value: 135, name: "视频广告", one: 4 },
            { value: 548, name: "搜索引擎", one: 5 }
          ],
          name: "visitedSource",
          type: "pie",
          radius: "55%",
          silent: true,
          zlevel: 0,
          hoverAnimation: true,
          hoverOffset: 10,
          center: ["50%", "60%"],
          itemStyle: {
            normal: {
              color: function(params) {
                let colorList;
                colorList = [
                  "#00ffff",
                  "#00ff00",
                  "#ffff00",
                  "#FF8C00",
                  "#FF0000"
                ];
                return colorList[params.dataIndex];
              }
            }
          },
          label: {
            normal: {
              position: "inner",
              show: false
            }
          }
        }
      };
    myChart.setOption(option)
    setTimeout(() => {
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })
    }, 500)
   setTimeout(() => {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: 0
      })
    }, 1500)

    //this.getInit();
  },
  methods: {
    getInit() {
      let myChart = echarts.init(document.getElementById("myChart"));

      let option = {
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: {
          data: [
            { value: 1335, name: "直接访问", one: 1 },
            { value: 310, name: "邮件营销", one: 2 },
            { value: 234, name: "联盟广告", one: 3 },
            { value: 135, name: "视频广告", one: 4 },
            { value: 548, name: "搜索引擎", one: 5 }
          ],
          name: "visitedSource",
          type: "pie",
          radius: "55%",
          silent: true,
          zlevel: 0,
          hoverAnimation: true,
          hoverOffset: 10,
          center: ["50%", "60%"],
          itemStyle: {
            normal: {
              color: function(params) {
                let colorList;
                colorList = [
                  "#00ffff",
                  "#00ff00",
                  "#ffff00",
                  "#FF8C00",
                  "#FF0000"
                ];
                return colorList[params.dataIndex];
              }
            }
          },
          label: {
            normal: {
              position: "inner",
              show: false
            }
          }
        }
      };

      //   myChart.dispatchAction({
      //     type: 'dataZoom',
      //     batch: [{
      //         // 第一个 dataZoom 组件
      //         start: 20,
      //         end: 30
      //     }, {
      //         // 第二个 dataZoom 组件
      //         dataZoomIndex: 1,
      //         start: 10,
      //         end: 20
      //     }]
      // })

      myChart.setOption(option);

      //  myChart.dispatchAction({
      //     type: 'dataZoom',
      //     start: 20,
      //     end: 30
      // });

      //  let that=this
      //   setTimeout(()=>{
      //     console.log('aaaaaaaaaaaaaaa')
      //       //this.$router.go(0)
      //      myChart.clear()
      //      //myChart.setOption(option);
      //       let optionDaya = {
      //         xAxis: {
      //           type: "category",
      //           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      //         },
      //         yAxis: {
      //           type: "value"
      //         },
      //         series: [
      //           {
      //             data: [150, 230, 224, 218, 135, 147, 260],
      //             type: "line"
      //           },

      //         ]
      //       };
      //      myChart.setOption(optionDaya);
      //   },3000)

      /*
      
      
      */
    }
  }
};
</script>

<style scoped>
</style>